<template>
	<view class="page">
		<template v-if="scrollTop<=450">
			<view class="backBox" :style="{top:menuTop+'px'}">
				<view class="Vr" style="padding: 10rpx;border-radius: 100%;">
					<u-icon name='arrow-left' color='#fff' @click='$utils.back()' size='30rpx' />
				</view>
			</view>

		</template>
		<u-navbar v-else title="挑战详情" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view style="flex: 1;">

			<view v-if="!loading" class="bottom" @click="jumpActive">
				<u-icon name='camera' color='#fff' size='60rpx' />
			</view>
			<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="List" @query="query"
				:default-page-no="1" :hide-empty-view='true' :default-page-size="10" :auto="false" @scroll='scroll'>
				<view class="background">
					<image mode="aspectFill" :src="detail.thumb" class="masking"
						style="z-index:1;background: transparent;"></image>
					<view class="masking" v-if="!loading" />
					<view class="masking" v-else />
					<view class="userBox" :style="{top:menuTop+80+'px'}">
						<u-avatar mode='aspectFill' :src='user.avatar' size='100rpx' />
						<view style="width: 20rpx;"></view>
						<view style="flex: 1;">
							<u-text :lines='1' :text='user.nick_name' color='#fff' />
							<view style="height: 20rpx;"></view>
							<view style="display: flex;">
								<view>
									<u--text lines='1' :iconStyle='{color:"#fff"}' prefixIcon='map' color='#fff'
										:text='detail.title' size='24rpx' />
								</view>
							</view>
						</view>
					</view>
					<view class="radius" />
				</view>
				<view class="viewWidth InfoBox">
					<view class="title">
						<u-icon name="attach" size="40rpx" labelSize='24rpx' label='目标信息'></u-icon>
					</view>
					<view class="infoContent" v-if='loading'>
						<view style="width: 50%;">
							<view class="mb20">
								<view style="height: 30rpx;width: 80%;" class="Skeleton" />
							</view>
							<view class="mb20">
								<view style="height: 30rpx;width: 80%;" class="Skeleton" />
							</view>
						</view>
						<view style="width: 50%;">
							<view class="mb20">
								<view style="height: 30rpx;width: 80%;" class="Skeleton" />
							</view>
							<view class="mb20">
								<view style="height: 30rpx;width: 80%;" class="Skeleton" />
							</view>
						</view>
					</view>
					<view class="infoContent " v-else>
						<view style="width: 50%;">
							<view class="mb20">
								<u--text lines='1' size='24rpx' :text='`开始日期：${detail.start_at}`' />
							</view>
							<view class="mb20">
								<u--text lines='1' size='24rpx' :text='`天数：${detail.days}天`' />
							</view>
						</view>
						<view style="width: 50%;">
							<view class="mb20">
								<u--text lines='1' size='24rpx' :text='`标题：${detail.title}`' />
							</view>
							<view class="mb20">
								<u--text lines='1' size='24rpx' :text='`状态：${detail.status_text}`' />
							</view>
						</view>
					</view>
				</view>
				<view class="viewWidth InfoBox">
				
					<view  v-if='renLoading'>
						<view v-for="(item,index) in 8" :key="item" style="height: 30rpx;width:100%;margin-top: 20rpx;"
							class="Skeleton" />
					</view>
					<view class="infoContent " v-else>
						<renCalendar :markDays='markDays' :disabledAfter='true' @monthChange='monthChange' />
					</view>
				</view>
				<view class="viewWidth InfoBox contentBox">
					<view class="title">
						<u-icon name="photo" size="40rpx" labelSize='24rpx' label='动态'></u-icon>
					</view>
					<active @reload='$refs.paging.reload()' :list='List' :loading='Listloading' ref='active'
						:playIndex='playIndex' :plan_id='plan_id' :weight='detail.weight' :start_at='detail.start_at'
						@ListloadingChange='Listloading!=Listloading' />
				</view>
			</z-paging>

		</view>

	</view>
</template>

<script>
	import active from './components/active'
	import renCalendar from './components/ren-calendar'
	export default {
		components: {
			active,
			renCalendar
		},
		data() {
			return {
				renLoading:true,
				markDays: ["2024-08-10"],
				user: uni.getStorageSync('user'),
				playIndex: 0,
				Listloading: true,
				List: [],
				detail: {},
				loading: true,
				plan_id: 0,
				menuTop: 0,
				scrollTop: 0,
			}
		},
		onLoad(op) {
			this.plan_id = op.id
			this.getDateil(op.id)
			this.$api.Plan.Date.List(this.plan_id, {
				date: this.maxDatefun()
			}).then(res => {
				this.markDays = res.data.dates
				this.renLoading=false
			})
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect() //可以获取小程序胶囊的位置。
			this.menuTop = menuButtonInfo.top
		},
		methods: {
			monthChange(e) {
				this.$api.Plan.Date.List(this.plan_id, {
					date: e,
				}).then(res => {
					this.markDays = res.data.dates
				})
			},
			maxDatefun() {
				// 创建一个表示当前时间的Date对象
				var today = new Date();

				// 使用getDate()方法获取当前日期，并加上1得到明天的日期
				var tomorrowDate = today.getDate();

				// 使用setDate()方法设置Date对象的日期为明天的日期
				today.setDate(tomorrowDate);

				// 获取明天的年份、月份和日期
				var tomorrowYear = today.getFullYear();
				var tomorrowMonth = today.getMonth() + 1; // 月份从0开始，所以要加1
				var tomorrowDay = today.getDate();


				return tomorrowYear + "-" + tomorrowMonth + "-" + tomorrowDay
			},
			jumpActive() {
				this.$utils.navigateTo({
					url: '/plan/active/add?id=' + this.plan_id
				})
			},
			getDateil(id) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.Plan.Detail(id).then(res => {
					this.detail = res.data.plan
					this.loading = false
					this.query(1, 10)
				}).catch(err => {
					uni.hideLoading()
				})
			},
			scroll(e) {
				const top = e.detail.scrollTop
				this.scrollTop = top * 2
				let index = 0
				let domTop0 = 0
				const query = uni.createSelectorQuery().in(this.$refs.active);
				query.selectAll('.activeBox').boundingClientRect(data => {
					data.forEach((rect, domIndex) => {
						let domTop = rect.top + top
						if (domIndex == 0) {
							domTop0 = domTop
						}
						if (top > (domTop - domTop0)) {
							index = domIndex
						}
						if (domIndex == data.length - 1) {
							this.playIndex = index

						}
					});
				}).exec();
			},
			query(page, size) {
				let obj = {
					page,
					size,
					plan_id: this.plan_id
				}
				uni.showLoading({
					title: '加载中...'
				})

				this.$api.Plan.Active.List(this.plan_id, obj).then(res => {
					this.Listloading = false
					this.$refs.paging.complete(res.data.fragments.data.map(item => {
						return {
							...item,
							user: res.data.users[item.user_id]
						}
					}))
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})

			}

		}
	}
</script>

<style lang="scss" scoped>
	.InfoBox {
		margin: 20rpx auto;
		background-color: #fff;
		box-shadow: 0 0 10rpx #ddd;
		padding: 10rpx;
		border-radius: 8rpx;

		.title {
			width: 100%;
			border-bottom: 1rpx solid #ddd;
			margin: 0 0 20rpx;
		}

		.infoContent {
			display: flex;
			width: 100%;
			justify-content: space-between;
		}
	}

	.page {
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.fff {
		background-color: #fff;
		width: 100%;
		z-index: 111;
	}



	.contentBox {
		flex: 1;
		position: relative;
	}

	.background {
		height: 500rpx;
		width: 100%;
		position: relative;
	}

	.masking {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
		position: absolute;
		width: 100%;
		height: 500rpx;
		z-index: 2;
	}

	.backBox {
		position: fixed;
		left: 40rpx;
		z-index: 1111111111;
	}

	.Vr {
		background: rgba(0, 0, 0, 0.3);
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
		color: #fff;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		>button {
			opacity: 0;
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}



	.iconfont {
		margin-right: 10rpx;
		font-size: 24rpx;
	}

	.userBox {
		display: flex;
		position: absolute;
		width: 90vw;
		left: 40rpx;
		z-index: 111;
	}

	.radius {
		position: absolute;
		bottom: 0;
		height: 20rpx;
		width: 100vw;
		background-color: #f5f5f5;
		border-radius: 16rpx 16rpx 0 0;
		z-index: 11;
	}

	.bottom {
		position: fixed;
		bottom: 10vh;
		right: 5vw;
		width: 100rpx;
		height: 100rpx;
		background-color: #999;
		border-radius: 16rpx 16rpx 0 0;
		z-index: 11;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
	}




	.add {
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50rpx;
		width: 200rpx;
		position: fixed;
		margin: auto;
		left: 0;
		right: 0;
		bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		background: linear-gradient(to top, #3573be, #489aff);
	}
</style>